<!--  -->
<template>
  <div class='padding20'>
    <el-card style="padding:10px;margin-top:10px">
    <div style="margin-bottom: 15px;">
      <span style='color:#333; font-size:32px;font-weight: bold'>待审核课程</span>
      <span style="color:'#989898;font-size:22px;margin-left:30px">当前
        <span style='font-size:30px'>{{list.length}}项</span>
        课程待审批
      </span>
    </div>
      <div>
        类型系统
        <el-select v-model="courseType" placeholder="" style="margin-left:20px" @change="courseAllCheck()" clearable>
          <el-option v-for="opt in courseList" :key="opt.id" :label="opt.label" :value="opt.id" />
        </el-select>
      </div>
      <CommonPic :list='list' @clickDetail='detailClick'></CommonPic>
      <!-- <el-empty v-if='!list.length' description='暂无数据'></el-empty> -->
      <el-pagination class="pageBar" style="padding:20px;text-align:right" background @size-change="(val)=>sizeChange(val,1)" @current-change="(val)=>currentChange(val, 1)" :current-page="pageInfo.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <el-card style="margin-top:30px;margin-bottom:10px">
      <div style="margin-bottom: 15px;">
        <span style='color:#333; font-size:32px;font-weight: bold'>待审核课程内容</span>
        <span style="color:'#989898;font-size:22px;margin-left:30px">当前
          <span style='font-size:30px'>{{contentList.length}}项</span>
          课程待审批
        </span>
      </div>
      <div style="padding:10px;margin-top:10px;margin-bottom:10px">
        类型系统
        <el-select v-model="courseType1" placeholder="" style="margin-left:20px" @change="contentAllCheck()" clearable>
          <el-option v-for="opt in courseList" :key="opt.id" :label="opt.label" :value="opt.id" />
        </el-select>
        <CommonPic :list='contentList' @clickDetail='detailClicks' :isPic='false'></CommonPic>
        <!-- <el-empty v-if='!contentList.length' description='暂无数据'></el-empty> -->
        <el-pagination class="pageBar" background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo1.currentPage" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo1.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total1">
        </el-pagination>
      </div>
    </el-card>

  </div>
</template>

<script>
import teacherApi from "../api/teacher.service.js";
// import studentApi from "../api/student.service.js";
import operateApi from "../api/operate.service.js";

export default {
  components: {},
  data() {
    return {
      courseType: "",
      courseType1: "",
      host: window.location.href.split("/#/")[0] + "/api",
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
      },
      pageInfo1: {
        currentPage: 1,
        pageSize: 10,
      },
      list: [],
      contentList: [],
      courseList: [],
      totalContent: 0,
      total1: 0,
      total: 0,
    };
  },
  mounted() {
    this.getCourseMenu();
    this.courseAllCheck();
    this.contentAllCheck();
  },
  computed: {},
  watch: {},
  methods: {
    async getCourseMenu() {
      let { data } = await teacherApi.getCourseMenu();
      let list = [];
      for (let i in data) {
        list.push({ label: data[i], id: i });
      }
      this.courseList = list;
    },
    async courseAllCheck() {
      let { data } = await operateApi.courseAllCheck({
        courseType: this.courseType,
        state: 1,
        ...this.pageInfo,
      });
      this.list = data.records;
      this.total = data.totalRecordCount;
    },
    async contentAllCheck() {
      let { data } = await operateApi.fileCheckList({
        courseType: this.courseType1,
        type: 0,
        ...this.pageInfo1,
      });
      this.contentList = data.records;
      this.total1 = data.totalRecordCount;
    },
    sizeChange(val, v) {
      if (v) {
        this.pageInfo.pageSize = val;
        this.courseAllCheck();
      } else {
        this.pageInfo1.pageSize = val;
        this.contentAllCheck();
      }
    },
    currentChange(val, v) {
      if (v) {
        this.pageInfo.currentPage = val;
        this.courseAllCheck();
      } else {
        this.pageInfo1.currentPage = val;
        this.contentAllCheck();
      }
    },
    detailClick(data) {
      this.$router.push({
        path: "/applyDetail",
        query: {
          id: data.id,
          originPath: "/home",
          alreadyCheck: false,
        },
      });
    },
    detailClicks(data) {
      this.$router.push({
        path: "/contentAuditDetail",
        query: {
          id: data.id,
          originPath: "/home",
        },
      });
    },
  },
  created() {},
};
</script>
<style lang="less" scoped >
.auditClass {
  margin-bottom: 10px;
  border: 1px solid gray;
  padding: 4px;
  margin-right: 1%;
  width: 19%;
  .auditItem {
    text-align: center;
    height: 230px;
    line-height: 230px;
    background: #dfdfdf;
    color: red;
    font-size: 24px;
    font-weight: 700;
  }
}
</style>